<template>
        <div class="father">
                <h2>父组件</h2>
                <h3>房产：{{ house }}</h3>
                <button @click="changeToy">修改c1玩具</button>
                <button @click="changeComputer">修改c2电脑</button>
                <button @click="sendBooks($refs)">发书</button>
                <Child1 ref="c1" />
                <Child2 ref="c2" />
        </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import Child1 from './Child1.vue'
import Child2 from './Child2.vue';
const house = ref(4)
const c1 = ref()
const c2 = ref()

function changeToy() {
        c1.value.toy = "黑神话：悟空"
}

function changeComputer(){
        c2.value.computer = "华为"
}

function sendBooks(refs: { [key: string]: any; }){
     for(let key in refs){
        refs[key].books +=3
     }
}

defineExpose({house})
</script>
<style scoped>
.father {
        background: gray;
        padding: 10px;
        box-shadow: 0 0 10px black;
        border-radius: 10px;
        margin: 0 10px;
}
</style>